<template>
  <div class="baseInfo wrap">
    <header class="title">基础信息</header>
    <section class="baseInfoForm" style="">
      <el-form ref="infoform" :model="infoForm" label-width="80px" :rules="infoRule">

        <el-form-item label="栏目分类" prop="columnTags">
         <!-- <el-cascader
          @change="(val,name)=>changeColumnTags(val,columnListData,name)"
            v-model.sync="infoForm.columnTags"
            :options="columnListData"
            :props="{ multiple: true, checkStrictly: true ,label:'tagsName',value:'tagsId',children:'sub'}"
            clearable
          /> -->

          <Cascader
            class="lessonUpdate"
            @change="(val)=>changeColumnTags(val,columnListData)"
           :value.sync="infoForm.columnTags"
            :children="'sub'"
           :list="columnListData"
          />
        </el-form-item>

        <el-form-item label="标签" prop="categoryTag" class="t-left">

            <!-- <Cascader
             :value.sync="infoForm.categoryTag"
              :children="'sub'"
             :list="tagsListData"></Cascader> -->
            <Cascader
              class="lessonUpdate"
              :option="{class:'lessonUpdate'}"
              @change="(val)=>changeColumnTags(val,tagsListData)"
             :value.sync="infoForm.categoryTag"
              :children="'sub'"
             :list="tagsListData"
            />


        </el-form-item>
        <el-form-item label="备注" prop="profiles">
          <el-input v-model="baseInfoForm.profiles" placeholder="请输入备注内容" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveBaseInfo">保存</el-button>
        </el-form-item>
      </el-form>
    </section>
  </div>
</template>

<script>
import { findColumnList, findTagsList } from '@/api/basic'
import { cateTagsGroupFindList } from '@/api/tags'
import { updatePersonPrepareLesson } from '@/api/personPrepareLesson'
import {arrTreeToArr,arrTreeTobj} from '@/utils/cateTagColumn'
import { reduceArr, tagsObjSwitch, assignment, compose } from '@/utils/categoryOrTags'
import Cascader from '@/components/Cascader'
import { mapMutations } from 'vuex'
export default {
  props: {
    baseInfoForm: {
      type: Object,
      default: null
    },
    id: {
      type: String,
      default: ''
    }
  },
  components:{
    Cascader
  },
  data() {
    return {
      searchVal:'',
      columnListData: [],
      infoForm:{
        columnTags:[],
        categoryTag:[]
      },
      isSave:false,
      infoRule:{
                 columnTags: [
                    { required: true, message: '请选择栏目分类', trigger: 'change' }
                  ],
                   categoryTag: [
                    { required: true, message: '请选择标签', trigger: 'change' }
                  ],

                  profiles: [
                    { required: false, message: '请输入备注内容', trigger: 'blur' }
                  ]
      }
    }
  },
  mounted() {
    this.$emit('formBank',this)
  },
  created() {
    // this._findColumnList()
     //this._cateTagsGroupFindList()
    this.classifyListArr = this.getClassfiyArr(this.baseInfoForm.categoryVOList)
     this._findColumnList()
     this._cateTagsGroupFindList()
  },
  watch:{
    // ['infoForm.columnTags'](val){
    //   this.changeColumnTags(this.infoForm.columnTags,this.columnListData)
    // },
    // ['infoForm.categoryTag'](val){
    //   this.changeColumnTags(this.infoForm.categoryTag,this.tagsListData)
    // },
    ['classifyListArr'](val){
      this._findColumnList()
      this._cateTagsGroupFindList()
    },
   ['baseInfoForm.columnTag'](val){
     var va = val.tags
      if(val==={} || (!val.tags &&val.length!==0)){
        this.baseInfoForm.columnTag = []
      }else if(val && val.tags){
      this.getBackcolumnTagFn(val)
        // this.infoForm.columnTags = arrTreelengthTobj(val.tags,this.columnListData,'tagsId')
      }
    },
    ['baseInfoForm.categoryTagList'](val){
          if(!val || !val.length){
           // this.infoForm.categoryTag = []
          }else if(val.length) {

            this.getBackCategoryListFn(val)
          }

        },
        tagsListData(classifyList){
          if(classifyList.length){
            this.getBackCategoryListFn(this.baseInfoForm.categoryList,classifyList)
          }
        }
   },
   computed:{
    //  classifyListArr(){
    //  return
    // },
     tagsListData(){
     // this.tagsListData = this.$store.state.app.cateTagsGroupFindList
      var classifyList = this.$store.state.app.cateTagsGroupFindList
       classifyList.map(list=>{
        return list.sub = list.tagsVoList
       })
      return  classifyList
     }
   },
  methods: {
    ...mapMutations({
      setClassifyCateList: 'SET_CLASSIFY_CATElIST', //栏目 分类 name 用来推荐备课
    }),
    changeColumnTags(vals,columnListData){
      var {val,label} = vals
      var obj =  arrTreeToArr(val)
        // var cateArr = columnListData.filter(item=>{
        //    for(var k in obj){
        //    return  item.tagsId == obj[k].tagsId
        //    }
        //  })
        let arr = this.$store.state.uploadLessonPlan.ClassfiyageListName || []
           if(Array.isArray(label)){
             label.map(list=>{
               arr.push(list)
             })
           }

         //console.log("setClassifyCateList",arr,obj ,name)
         this.setClassifyCateList(this.distinct(arr,arr))


    },
    blankSelect(dataOpt,resData,resInfo,tagsId){
      //分类渲染data， 原cate数据 , selectDate回选v-model ,
      dataOpt = assignment(resData)
     var   selectDate = []
      if (resInfo && resInfo.length > 0) {
        var colTagsArr = reduceArr(dataOpt)
      //  console.log("resInfo",resInfo,colTagsArr)
              resInfo.forEach(item => {
          const items = colTagsArr.filter(colTag =>{
               //includes
             if(colTag[tagsId]==item[tagsId]){
               selectDate.push(colTag.selectArr)
             }
          //   return item
           })
         // return  colTag
          // if(items){
          // selectDate.push(items.selectArr)
          // }
        })
      }
       return  selectDate
    },

    baseInfoFormChange(val){
      console.log('infoForm.categoryTagList',val)
    },
    async _findColumnList(pCateId) {
      const res = await findColumnList(this.classifyListArr)
      this.columnListData = res.data
      var val = this.baseInfoForm.columnTag
      this.getBackcolumnTagFn(val)
    },
    getBackcolumnTagFn(val){

      if(val&&this.columnListData.length){
         var va = val.tags
      this.infoForm.columnTags = this.blankSelect(this.columnListData,this.columnListData,  tagsObjSwitch(va ),'tagsId')
      var columnTagArr = []
      for(var jk in va){
        columnTagArr.push(va[jk])
      }
      this.changeColumnTags({label:columnTagArr})
       }
    },

    _cateTagsGroupFindList (pCateId) {
       const params = {
         tagsBizEnum: 'PREPARELESSON', //教案
         ...this.classifyListArr
       }
       this.$store.dispatch("app/_cateTagsGroupFindList",params)
       var val = this.baseInfoForm.categoryList


    },
    getBackCategoryListFn(val,tagsListData){
      if(val&& this.tagsListData.length){
        var sleArr=[]
        var va = val.tags
        var columnTagArr = []
        for(var jk in va){
          columnTagArr.push(va[jk])

        }
        val.map(list=>{
        for (var i in list.tags){
          sleArr.push({tagsId:i,tagsName:list.tags[i]})
        }
        })
        if(sleArr.length){
        this.infoForm.categoryTag = this.blankSelect( this.tagsListData, this.tagsListData,sleArr,'tagsId')
        this.changeColumnTags({label:columnTagArr})
       }
      }
    },
     saveBaseInfo() {
      this.$refs.infoform.validate(async(val)=>{
        if(val){
          const params = {
            categoryTag: arrTreeToArr(this.infoForm.categoryTag,'id','name'),
            columnTag: arrTreeToArr(this.infoForm.columnTags,'id','name'),
            id: this.baseInfoForm.id,
            profiles: this.baseInfoForm.profiles
          }
          const res = await updatePersonPrepareLesson(params)
          this.isSave = true
          this.$message.success('保存成功！')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.baseInfo{
  margin-bottom: 24px;
  width: 1600px;
  overflow: hidden;
  .el-form{
    width:60%;
    min-width: 300px;
  }
  .title{
    height: 54px;
    line-height: 54px;
    font-size: 14px;
    color: #000;
    padding: 0 40px;
    border-bottom: 1px solid #e2e2e2;
  }
  .baseInfoForm{
    padding:40px 40px 0 40px;
    /deep/.el-form-item{
      margin-bottom: 40px;
    }
    /deep/.el-cascader{
      width: 60%;margin-right: 5px;
    }
    /deep/.el-input{
      // width: 80%;
    }
  }
}
</style>
